import React, { useEffect, useRef, useState } from 'react'
import { history, Outlet, setLocale, useIntl, useLocation } from 'umi';
import { Affix, Dropdown, Menu, } from "antd"
import '../assets/css/public.less';
import './index.less';

import logo from '../assets/image/logo.png';
import footer1 from '../assets/image/footer1.png';
import footer2 from '../assets/image/footer2.png';
import footer3 from '../assets/image/footer3.png';
import footer4 from '../assets/image/footer4.png';
import musicMp3 from '../assets/image/music.mp3';
import { useAccount } from "wagmi";


import ReactAudioPlayer from 'react-audio-player';
import WalletButton from "@/components/WalletButton";
import NFTconfig from "@/config/NFTconfig";
import { IsMobile } from "@/components/IsMobile";
export default function InsideLayout() {
    const { mobile } = IsMobile();
    const [selectedKeys, setSelectedKeys] = useState('');
    //const navigate = useNavigate();
    let { pathname } = useLocation();
    const [isScroll, setisScroll] = useState(false);
    const [language, setLanguage] = useState('US');
    const [musicIco, setMusicIco] = useState(false);
    const intl = useIntl();

    useEffect(() => {
        setSelectedKeys(pathname);
    }, [pathname]);

    const [showGive, setShowGive] = useState<boolean>(false);
    const { address, isConnected } = useAccount();

    useEffect(() => {
        setShowGive(isConnected && address === NFTconfig.owner)
    }, [address, isConnected])


    const audioRef = useRef(null)

    useEffect(() => {
        //audioRef?.current?.audioEl.current.play();
    }, []);

    const menu = (
        <Menu>
            <Menu.Item>
                <div className="ecitems" onClick={() => changeLanguage('US')}>EN</div>
            </Menu.Item>
            <Menu.Item>
                <div className="ecitems" onClick={() => changeLanguage('CN')}>中文</div>
            </Menu.Item>
            <Menu.Item>
                <div className="ecitems" onClick={() => changeLanguage('TC')}>繁体</div>
            </Menu.Item>
        </Menu>
    );

    const changeLanguage = (str: string) => {
        if (str == 'US') {
            setLocale('en-US', true)
        } else if (str == 'CN') {
            setLocale('zh-CN', true)
        } else {
            setLocale('zh-TC', true)
        }
        setLanguage(str)
    }

    const translateKey = () => {
        let text = ''
        switch (language) {
            case 'US':
                text = "EN";
                break;
            case 'CN':
                text = "中文";
                break;
            case 'TC':
                text = "繁体";
                break;
            default:
                text = "";
        }
        return text
    }

    const changeScrollFn = (affixed: any) => {
        setisScroll(affixed)
    }

    return (
        <>
            <div className='outcontent'>
                <Outlet />
            </div>
        </>
    );
}
